{% block sw_mail_header_footer_detail %}
<sw-page class="sw-mail-header-footer-detail">
    {% block sw_mail_header_footer_detail_header %}
    <template #smart-bar-header>
        <h2>{{ placeholder(mailHeaderFooter, 'name', $tc('sw-mail-header-footer.detail.textHeadline')) }}</h2>
    </template>
    {% endblock %}

    {% block sw_mail_header_footer_detail_actions %}
    <template #smart-bar-actions>
        {% block sw_mail_header_footer_detail_actions_abort %}
        <mt-button
            v-tooltip.bottom="{
                message: 'ESC',
                appearance: 'light'
            }"
            :disabled="isLoading"
            variant="secondary"
            size="default"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        {% block sw_mail_header_footer_detail_actions_save %}
        <sw-button-process
            v-tooltip.bottom="tooltipSave"
            class="sw-mail-header-footer-detail__save-action"
            variant="primary"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="!allowSave || undefined"
            @update:process-success="saveFinish"
            @click.prevent="onSave"
        >
            {{ $tc('sw-mail-header-footer.detail.buttonSave') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    {% block sw_mail_header_footer_detail_language_switch %}
    <template #language-switch>
        <sw-language-switch
            :save-changes-function="saveOnLanguageChange"
            @on-change="onChangeLanguage"
        />
    </template>
    {% endblock %}

    {% block sw_mail_header_footer_detail_content %}
    <template #content>
        <sw-card-view sidebar>
            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            <template v-else-if="mailHeaderFooter">
                {% block sw_mail_header_footer_detail_content_language_info %}
                <sw-language-info
                    :entity-description="placeholder(mailHeaderFooter, 'name', $tc('sw-mail-header-footer.detail.textHeadline'))"
                />
                {% endblock %}

                {% block sw_mail_header_footer_detail_basic_info %}
                <mt-card
                    :title="$tc('sw-mail-header-footer.detail.basic.titleCard')"
                    position-identifier="sw-mail-header-footer-detail-basic-info"
                >
                    {% block sw_mail_header_footer_basic_form_name_field %}
                    <mt-text-field
                        v-model="mailHeaderFooter.name"
                        name="sw-field--mailHeaderFooter-name"
                        validation="required"
                        required
                        :label="$tc('sw-mail-header-footer.detail.basic.labelName')"
                        :placeholder="placeholder(mailHeaderFooter, 'name', $tc('sw-mail-header-footer.detail.basic.placeholderName'))"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                        :error="mailHeaderFooterNameError"
                    />
                    {% endblock %}

                    {% block sw_mail_header_footer_basic_form_description_field %}
                    <mt-textarea
                        v-model="mailHeaderFooter.description"
                        name="sw-field--mailHeaderFooter-description"
                        :label="$tc('sw-mail-header-footer.detail.basic.labelDescription')"
                        :placeholder="placeholder(mailHeaderFooter, 'description', $tc('sw-mail-header-footer.detail.basic.placeholderDescription'))"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                    />
                    {% endblock %}

                    {% block sw_mail_header_footer_basic_form_sales_channels_field %}
                    <sw-entity-multi-select
                        id="salesChannels"
                        v-model:entity-collection="mailHeaderFooter.salesChannels"
                        class="sw-mail-header-footer-detail__sales-channel"
                        :label="$tc('sw-mail-header-footer.detail.basic.labelSalesChannels')"
                        :placeholder="$tc('sw-mail-header-footer.detail.basic.placeholderSalesChannels')"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                        required
                    />
                    {% endblock %}
                </mt-card>
                {% endblock %}

                {% block sw_mail_header_footer_detail_content_header %}
                <mt-card
                    :title="$tc('sw-mail-header-footer.detail.header.titleCard')"
                    position-identifier="sw-mail-header-footer-detail-content-header"
                >
                    {% block sw_mail_header_footer_detail_content_header_plain_field %}
                    <sw-code-editor
                        v-model:value="mailHeaderFooter.headerPlain"
                        class="sw-mail-header-footer-detail__code-editor--header-plain"
                        identifier="header_plain"
                        name="header_plain"
                        completion-mode="entity"
                        :label="$tc('sw-mail-header-footer.detail.header.labelPlain')"
                        :placeholder="placeholder(mailHeaderFooter, 'headerPlain', $tc('sw-mail-header-footer.detail.header.placeholderPlain'))"
                        :completer-function="completerFunction"
                        :editor-config="editorConfig"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                    />
                    {% endblock %}

                    {% block sw_mail_header_footer_detail_content_header_html_field %}
                    <sw-code-editor
                        v-model:value="mailHeaderFooter.headerHtml"
                        class="sw-mail-header-footer-detail__code-editor--header-html"
                        identifier="header_html"
                        name="header_html"
                        completion-mode="entity"
                        :label="$tc('sw-mail-header-footer.detail.header.labelHtml')"
                        :placeholder="placeholder(mailHeaderFooter, 'headerHtml', $tc('sw-mail-header-footer.detail.header.placeholderHtml'))"
                        :completer-function="completerFunction"
                        :editor-config="editorConfig"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                    />
                    {% endblock %}
                </mt-card>
                {% endblock %}

                {% block sw_mail_header_footer_detail_content_footer %}
                <mt-card
                    :title="$tc('sw-mail-header-footer.detail.footer.titleCard')"
                    position-identifier="sw-mail-header-footer-detail-content-footer"
                >
                    {% block sw_mail_header_footer_detail_content_footer_plain_field %}
                    <sw-code-editor
                        v-model:value="mailHeaderFooter.footerPlain"
                        class="sw-mail-header-footer-detail__code-editor--footer-plain"
                        identifier="footer_plain"
                        name="footer_plain"
                        completion-mode="entity"
                        :label="$tc('sw-mail-header-footer.detail.footer.labelPlain')"
                        :placeholder="placeholder(mailHeaderFooter, 'footerPlain', $tc('sw-mail-header-footer.detail.footer.placeholderPlain'))"
                        :completer-function="completerFunction"
                        :editor-config="editorConfig"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                    />
                    {% endblock %}

                    {% block sw_mail_header_footer_detail_content_footer_html_field %}
                    <sw-code-editor
                        v-model:value="mailHeaderFooter.footerHtml"
                        class="sw-mail-header-footer-detail__code-editor--footer-html"
                        identifier="footer_html"
                        name="footer_html"
                        completion-mode="entity"
                        :label="$tc('sw-mail-header-footer.detail.footer.labelHtml')"
                        :placeholder="placeholder(mailHeaderFooter, 'footerHtml', $tc('sw-mail-header-footer.detail.footer.placeholderHtml'))"
                        :completer-function="completerFunction"
                        :editor-config="editorConfig"
                        :disabled="!acl.can('mail_templates.editor') || undefined"
                    />
                    {% endblock %}
                </mt-card>
                {% endblock %}
            </template>
        </sw-card-view>

        <sw-modal
            v-if="showModal"
            :title="$tc('sw-mail-header-footer.modal.title')"
            @modal-close="onClose"
        >
            <p>{{ $tc('sw-mail-header-footer.modal.mainContent') }}</p>

            <div class="sw-mail-header-footer-detail__sales-channel-list">
                <p class="sw-mail-header-footer-detail__sales-channel-list-label">
                    {{ $tc('sw-mail-header-footer.modal.affectedList') }}
                </p>

                <p
                    v-for="salesChannel in alreadyAssignedSalesChannels"
                    :key="salesChannel.translated.name"
                    class="sw-mail-header-footer-detail__sales-channel-list-entry"
                >
                    {{ salesChannel.translated.name }}
                </p>
            </div>

            <template #modal-footer>
                <mt-button
                    variant="secondary"
                    @click="onClose"
                >
                    {{ $tc('global.default.cancel') }}
                </mt-button>

                <mt-button
                    :is-loading="isLoading"
                    variant="critical"
                    @click="confirmSave"
                >
                    {{ $tc('sw-mail-header-footer.modal.confirmButton') }}
                </mt-button>
            </template>
        </sw-modal>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
